<template>
  <el-row class="mosWrap">
    <el-row class="title" type="flex" justify="space-between">
      <el-col type="flex" :span="14">
        <el-col style="width: 26px" class="imgHide">
          <img height="24" src="../../../assets/images/left.png"/>
        </el-col>
        <el-col align="center" style="line-height: 40px;width: 170px">三网网站链路质量</el-col>
        <el-col style="width: 26px" class="imgHide">
          <img height="24" src="../../../assets/images/right.png"/>
        </el-col>
      </el-col>
      <el-col :span="10" style="position: relative">
        <el-select
          v-model="selectValue"
          size="mini"
          style="width: 100%;position:absolute;top:-4px;right:0"
          @change="tableRightDestChanged"
        >
          <el-option
            v-for="destName in destNameList"
            :label="Object.values(destName)[0]"
            :value="Object.values(destName)[0]"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row type="flex" class="tableHeaderWrap">
      <div class="tableHeader" style="flex: 1">序号</div>
      <div class="tableHeader" style="flex: 2">接入链路</div>
      <div class="tableHeader" style="flex: 2">测试次数</div>
      <div class="tableHeader" style="flex: 2">时延(ms)</div>
      <div class="tableHeader" style="flex: 2">丢包率</div>
      <div class="tableHeader" style="flex:0.1"></div>
    </el-row>
    <div style="display: flex;flex-direction: column;height:calc(34vh - 160px);">
      <el-row
        v-for="(city, index) in dataList"
        :key="index" type="flex"
        :class="index%2 !== 0 ? 'dark' : ''"
        class="tableBody"
      >
        <div class="tableName" style="flex: 1">
          <div class="circle">{{ index + 1 }}</div>
        </div>
        <div class="tableName" style="flex: 2">{{ city.operator }}</div>
        <div class="tableName" style="flex: 2">{{ city.test_count }}</div>
        <div class="tableName" style="flex: 2">{{ city.rtt }}</div>
        <div class="tableName" style="flex: 2">{{ city.lost_rate }}%</div>
        <div class="tableName" style="flex:0.1"/>
      </el-row>
    </div>
  </el-row>
</template>

<script>
import apiUrl from '@/config'
  export default {
    name: 'TableRight',
    props: {
      dataList: {
        type: Array,
        default: ()=>[]
      }
    },
    data() {
      return {
        baseURL: process.env.NODE_ENV === 'production' ? apiUrl.apiUrl.devUrl : apiUrl.apiUrl.testUrl, // 生产
        destNameList: [],
        selectValue: '全部'
      }
    },
    mounted() {
      this.getDestNameList()
    },
    methods: {
      tableRightDestChanged(value) {
        this.$bus.$emit('tableRightDestChanged', value)
      },
      getDestNameList() {
        this.$axios.get(`${this.baseURL}/api/benchmarking/destNameSelectListLinkQuality`).then((response) => {
          let res = response.data
        // window._api.apiDestName().then(res => {
          if (res.status === 0) {
            this.destNameList = res.data
          } else {
            this.$message.warning('数据异常')
          }
        })
      }
    }
  }
</script>

<style scoped>
.mosWrap{
  border-radius: 5px;
  background: rgba(14,22,95,0.4);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  border: 1px solid rgba(14,101,187,0.46);
  height: calc(54vh - 255px);
  margin-top: 2vh;
}
.title{
  font-size: 20px;
  line-height: 50px;
  height: 50px;
  text-align: left;
  padding: 6px 16px 0 16px;
  color: #00DDFF;
  font-weight: bold;
}
.tableHeaderWrap{
  background: #003F87;
  border-top: 1px solid rgba(64,169,255,0.5);
  border-bottom: 1px solid rgba(64,169,255,0.5);
  /*margin: 20px 0 10px 0;*/
  padding: 2px 30px 0 10px;
}
.tableHeader{
  flex: 1;
  color: #FFFFFF;
  font-family: Microsoft Tai Le;
  font-weight: 400;
  font-size: 16px;
  line-height: 36px;
  height: 36px;
  text-align: center;
}
.tableName{
  display: flex;
  flex: 1;
  justify-content: center;
  font-family: Microsoft Sans Serif;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
}
.tableBody{
  flex: 1;
  align-items: center;
  padding: 0px 30px 0 10px;
  color: #ffffff;
  max-height: 40px;
  /*line-height: 50px;*/
}
.tableBody:hover{
  background: linear-gradient(#329ed2,#5b5bf6);
  color: #ffffff;
}
.chinaButton{
  padding: 0;
  font-size: 16px;
  height: 16px;
  height: 16px;
}
.circle{
  font-weight: bold;
  width: 20px;
  height: 20px;
  background: rgb(0, 128, 255);
  border-radius: 50%;
  line-height: 20px;
}
.dark{
  background: rgba(24,66,107,0.7)
}
.dark:hover{
  background: linear-gradient(#329ed2,#5b5bf6);
  color: #ffffff;
}
@media only screen and (min-width: 1921px) {
  .tableHeader {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1920px) {
  .tableHeader {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1600px) {
  .tableHeader {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1440px) {
  .tableHeader {
    font-size: 14px;
  }
}
</style>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-input__inner{
    background: #003F87;
    border: 1px solid #409EFF
  }
  .el-select-dropdown{
    background: rgba(0,63,135,0.9);
    border: 1px solid #409EFF
  }
  .el-select-dropdown__item{
    color: white
  }
  .el-select-dropdown__item.hover{
    background: #409EFF;
    color: #ffffff;
  }
  .el-input__inner{
    color: white
  }
</style>
